<template>
  <div class="detail_box">
    <h2>详情页</h2>
    <div v-for="item in detaildata" :key="item.product_id" class="fx">
      <img :src="'http://101.132.181.9/api/' + product_picture" alt="" />
      <div>
        <p>{{ item.product_name }}</p>
        <p class="mt">{{ item.product_intro }}</p>
        <p class="mt" style="color: #ff7a20">{{ item.product_title }}</p>
        <p class="mt">
          <span style="color: #ff7a20">
            {{ item.product_selling_price }}元</span
          >
          <span>{{ item.product_price }}元</span>
        </p>
        <ul>
          <li>
            <p>{{ item.product_name }}</p>
            <p style="color: #ff7a20">总计：{{ item.product_title }}</p>
          </li>
          <li>
            <span> {{ item.product_selling_price }}元</span>
            <span>{{ item.product_price }}元</span>
          </li>
        </ul>

        <div class="btn">
          <el-button type="warning">加入购物车</el-button>

          <el-button type="info">喜欢</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ref, reactive, toRefs, computed } from "vue";

export default {
  name: "detail",
  components: {},
  setup() {
    // 引入路由
    const router = useRouter();
    const route = useRoute();
    // 引入仓库
    const store = useStore();
    const data = reactive({
      detaildata: [],
    });
    let detaildata = computed(() => store.state.detaildata);
    console.log(detaildata);
    return {
      ...toRefs(data),
      detaildata,
    };
  },
};
</script>

<style lang="scss" scoped>
.fx {
  display: flex;
  justify-content: space-between;
  align-content: center;
  img {
    flex: 1;
    height: 500px;
  }
  ul {
    display: flex;
    li {
      flex: 1;
      margin-left: 50px;
      margin: 100px 0;
    }
  }
}
.btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
